<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		body {
			margin: 0;
			background: #fafafa;
			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
			color: #333;
			position: absolute;
			height: 100%;
			width: 100%;
			min-height: 800px;
		}
		
		#title {
			width: 900px;
			min-height: 18px;
			margin: 10px auto;
			text-align: center;
			font-size: 16px;
			color: #E2E2E2;
			font-weight: 400;
		}
		
		#title:hover {
			color: #777;
		}
		
		#viewer.spreads {
			width: 900px;
			height: 600px;
			box-shadow: 0 0 4px #ccc;
			border-radius: 5px;
			padding: 0;
			position: relative;
			margin: 10px auto;
			background: white url('ajax-loader.gif') center center no-repeat;
			top: calc(50vh - 400px);
		}
		
		#viewer.spreads .epub-view>iframe {
			background: white;
		}
		
		#viewer.scrolled {
			overflow: hidden;
			width: 800px;
			margin: 0 auto;
			position: relative;
			background: url('ajax-loader.gif') center center no-repeat;
		}
		
		#viewer.scrolled .epub-container {
			background: white;
			box-shadow: 0 0 4px #ccc;
			margin: 10px;
			padding: 20px;
		}
		
		#viewer.scrolled .epub-view>iframe {
			background: white;
		}
		
		#prev {
			left: 0;
		}
		
		#next {
			right: 0;
		}
		
		#toc {
			display: block;
			margin: 10px auto;
		}
		
		@media (min-width: 1000px) {
			#viewer.spreads:after {
				position: absolute;
				width: 1px;
				border-right: 1px #000 solid;
				height: 90%;
				z-index: 1;
				left: 50%;
				margin-left: -1px;
				top: 5%;
				opacity: .15;
				box-shadow: -2px 0 15px rgba(0, 0, 0, 1);
				content: "";
			}
			#viewer.spreads.single:after {
				display: none;
			}
			#prev {
				left: 40px;
			}
			#next {
				right: 40px;
			}
		}
		
		.arrow {
			position: fixed;
			top: 50%;
			margin-top: -32px;
			font-size: 64px;
			color: #E2E2E2;
			font-family: arial, sans-serif;
			font-weight: bold;
			cursor: pointer;
			-webkit-user-select: none;
			-moz-user-select: none;
			user-select: none;
			text-decoration: none;
		}
		
		.navlink {
			margin: 14px;
			display: block;
			text-align: center;
			text-decoration: none;
			color: #ccc;
		}
		
		.arrow:hover,
		.navlink:hover {
			color: #777;
		}
		
		.arrow:active,
		.navlink:hover {
			color: #000;
		}
		
		#book-wrapper {
			width: 480px;
			height: 640px;
			overflow: hidden;
			border: 1px solid #ccc;
			margin: 28px auto;
			background: #fff;
			border-radius: 0 5px 5px 0;
			position: absolute;
		}
		
		#book-viewer {
			width: 480px;
			height: 660px;
			margin: -30px auto;
			-moz-box-shadow: inset 10px 0 20px rgba(0, 0, 0, .1);
			-webkit-box-shadow: inset 10px 0 20px rgba(0, 0, 0, .1);
			box-shadow: inset 10px 0 20px rgba(0, 0, 0, .1);
		}
		
		#book-viewer iframe {
			padding: 40px 40px;
		}
		
		#controls {
			position: absolute;
			bottom: 16px;
			left: 50%;
			width: 400px;
			margin-left: -200px;
			text-align: center;
			display: none;
		}
		
		#controls>input[type=range] {
			width: 400px;
		}
		
		#navigation {
			width: 400px;
			height: 100vh;
			position: absolute;
			overflow: auto;
			top: 0;
			left: 0;
			background: #777;
			-webkit-transition: -webkit-transform .25s ease-out;
			-moz-transition: -moz-transform .25s ease-out;
			-ms-transition: -moz-transform .25s ease-out;
			transition: transform .25s ease-out;
		}
		
		#navigation.fixed {
			position: fixed;
		}
		
		#navigation h1 {
			width: 200px;
			font-size: 16px;
			font-weight: normal;
			color: #fff;
			margin-bottom: 10px;
		}
		
		#navigation h2 {
			font-size: 14px;
			font-weight: normal;
			color: #B0B0B0;
			margin-bottom: 20px;
		}
		
		#navigation ul {
			padding-left: 36px;
			margin-left: 0;
			margin-top: 12px;
			margin-bottom: 12px;
			width: 340px;
		}
		
		#navigation ul li {
			list-style: decimal;
			margin-bottom: 10px;
			color: #cccddd;
			font-size: 12px;
			padding-left: 0;
			margin-left: 0;
		}
		
		#navigation ul li a {
			color: #ccc;
			text-decoration: none;
		}
		
		#navigation ul li a:hover {
			color: #fff;
			text-decoration: underline;
		}
		
		#navigation ul li a.active {
			color: #fff;
		}
		
		#navigation #cover {
			display: block;
			margin: 24px auto;
		}
		
		#navigation #closer {
			position: absolute;
			top: 0;
			right: 0;
			padding: 12px;
			color: #cccddd;
			width: 24px;
		}
		
		#navigation.closed {
			-webkit-transform: translate(-400px, 0);
			-moz-transform: translate(-400px, 0);
			-ms-transform: translate(-400px, 0);
		}
		
		svg {
			display: block;
		}
		
		.close-x {
			stroke: #cccddd;
			fill: transparent;
			stroke-linecap: round;
			stroke-width: 5;
		}
		
		.close-x:hover {
			stroke: #fff;
		}
		
		#opener {
			position: absolute;
			top: 0;
			left: 0;
			padding: 10px;
			stroke: #E2E2E2;
			fill: #E2E2E2;
		}
		
		#opener:hover {
			stroke: #777;
			fill: #777;
		}
		
		::selection {
			background: yellow;
		}
		
		#extras {
			width: 600px;
			margin: 40px auto;
		}
		
		#highlights {
			list-style: none;
			margin-left: 0;
			padding: 0;
		}
		
		#highlights li {
			list-style: none;
			margin-bottom: 20px;
			border-top: 1px solid #E2E2E2;
			padding: 10px;
		}
		
		#highlights a {
			display: block;
		}
		
		#viewer.spreads {
			top: 0;
			margin-top: 50px;
		}
		
		[ref="epubjs-mk"] {
			background: url("") no-repeat;
			width: 20px;
			height: 20px;
			cursor: pointer;
			margin-left: 0;
		}
	</style>
</head>
<body>
	<select id="toc"></select>
	<div id="frame" style="margin-top: -40px;">
		<div id="viewer" class="spreads"></div>
		<a id="prev" href="#prev" class="arrow">‹</a>
		<a id="next" href="#next" class="arrow">›</a>
	</div>
	<div id="extras">
		<ul id="highlights"></ul>
	</div>
	<script src="../../assets/lib/layui/lay/modules/epub/jszip.min.js"></script>
	<script src="../../assets/lib/layui/lay/modules/epub/epub.js"></script>
	<script type="text/javascript">
		var fileBasePath = getBaseRootPath();//上传文件展示路径
		
		function getBaseRootPath(){
			var curWwwPath = window.document.location.href;  
		    var pathName = window.document.location.pathname;  
		    var pos = curWwwPath.indexOf(pathName);  
		    var localhostPaht = curWwwPath.substring(0, pos);  
		    var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);  
		    return(localhostPaht + "/");//http://127.0.0.1:8080/
		}
		
 		var book = ePub(fileBasePath + parent.fileUrl);
		var rendition = book.renderTo("viewer", {
			width: "100%",
			height: 600,
			ignoreClass: 'annotator-hl',
			manager: "continuous"
		});

		var displayed = rendition.display(6);

		// Navigation loaded
		book.loaded.navigation.then(function(toc) {
			// console.log(toc);
		});
		
		//上一页
		var next = document.getElementById("next");
		next.addEventListener("click", function() {
			rendition.next();
		}, false);
		
		//下一页
		var prev = document.getElementById("prev");
		prev.addEventListener("click", function() {
			rendition.prev();
		}, false);

		var keyListener = function(e) {
			
			//上一页
			if((e.keyCode || e.which) == 37) {
				rendition.prev();
			}

			//下一页
			if((e.keyCode || e.which) == 39) {
				rendition.next();
			}

		};

		rendition.on("keyup", keyListener);
		document.addEventListener("keyup", keyListener, false);
		
		rendition.on("rendered", function(section) {
			var current = book.navigation && book.navigation.get(section.href);

			if(current) {
				var $select = document.getElementById("toc");
				var $selected = $select.querySelector("option[selected]");
				if($selected) {
					$selected.removeAttribute("selected");
				}

				var $options = $select.querySelectorAll("option");
				for(var i = 0; i < $options.length; ++i) {
					let selected = $options[i].getAttribute("ref") === current.href;
					if(selected) {
						$options[i].setAttribute("selected", "");
					}
				}
			}

		});
		
		rendition.on("relocated", function(location) {
			// console.log(location);
		});

		// Apply a class to selected text
		rendition.on("selected", function(cfiRange, contents) {
			rendition.annotations.highlight(cfiRange, {}, (e) => {
				console.log("highlight clicked", e.target);
			});
			contents.window.getSelection().removeAllRanges();

		});

		this.rendition.themes.default({
			'::selection': {
				'background': 'rgba(255,255,0, 0.3)'
			},
			'.epubjs-hl': {
				'fill': 'yellow',
				'fill-opacity': '0.3',
				'mix-blend-mode': 'multiply'
			}
		});

		// Illustration of how to get text from a saved cfiRange
		var highlights = document.getElementById('highlights');

		rendition.on("selected", function(cfiRange) {

			book.getRange(cfiRange).then(function(range) {
				var text;
				var li = document.createElement('li');
				var a = document.createElement('a');
				var remove = document.createElement('a');
				var textNode;

				if(range) {
					text = range.toString();
					textNode = document.createTextNode(text);

					a.textContent = cfiRange;
					a.href = "#" + cfiRange;
					a.onclick = function() {
						rendition.display(cfiRange);
					};

					remove.textContent = "remove";
					remove.href = "#" + cfiRange;
					remove.onclick = function() {
						rendition.annotations.remove(cfiRange);
						return false;
					};

					li.appendChild(a);
					li.appendChild(textNode);
					li.appendChild(remove);
					highlights.appendChild(li);
				}

			})

		});
		
		book.loaded.navigation.then(function(toc) {
			var $select = document.getElementById("toc"),
				docfrag = document.createDocumentFragment();

			toc.forEach(function(chapter) {
				var option = document.createElement("option");
				option.textContent = chapter.label;
				option.setAttribute("ref", chapter.href);

				docfrag.appendChild(option);
			});

			$select.appendChild(docfrag);

			$select.onchange = function() {
				var index = $select.selectedIndex,
					url = $select.options[index].getAttribute("ref");
				rendition.display(url);
				return false;
			};

		});
	</script>
</body>
</html>